import React, { memo } from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import { MiniArea } from '@/components/Charts';
import NumberInfo from '@/components/NumberInfo';
import styles from './ActiveChart.less';

const ActiveChart = memo(({ activeData }) => (
  <div className={styles.activeChart}>
    <NumberInfo subTitle={formatMessage({ id: 'app.monitor.target-assessment' })} total={formatMessage({ id: 'app.monitor.expected-to-meet-expectations' })} />
    <div style={{ marginTop: 32 }}>
      <MiniArea
        animate={false}
        line
        borderWidth={2}
        height={84}
        scale={{
          y: {
            tickCount: 3
          }
        }}
        yAxis={{
          tickLine: false,
          label: false,
          title: false,
          line: false
        }}
        data={activeData}
      />
    </div>
    {(activeData.length > 0) && (
      <div>
        <div className={styles.activeChartGrid}>
          <p>{[...activeData].sort()[activeData.length - 1].y + 200} {formatMessage({ id: 'app.monitor.billion' })}</p>
          <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} {formatMessage({ id: 'app.monitor.billion' })}</p>
        </div>
        <div className={styles.dashedLine}>
          <div className={styles.line} />
        </div>
        <div className={styles.dashedLine}>
          <div className={styles.line} />
        </div>
      </div>
    )}
    {(activeData.length > 0) && (
      <div className={styles.activeChartLegend}>
        <span>00:00</span>
        <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
        <span>{activeData[activeData.length - 1].x}</span>
      </div>
    )}
  </div>
));

export default ActiveChart;